<template>
    <div class="charts_box">
        <div :id="chartData.domId" class="charts-pie"></div>
        <div class="charts_content">
            <div class="num_box">
                <span class="num">{{chartData.online}}</span>
                <span>/{{chartData.total}}</span>
            </div>
            <div class="typeName">{{ chartData.typeName }}</div>
        </div>
        <div class="bottom_box">
            {{chartData.title}}
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

const props = defineProps({
    chartData: {
        type: Object,
        default: ()=>{}
    }
})
onMounted(()=>{
    init()
})
const init = () => {
    let chartDom = document.getElementById(props.chartData.domId);
    let myChart = echarts.init(chartDom);
    let colorArr = [
        ['#15EFE6', '#60BBFF'], ['#2868E5', '#2651FF'],
        ['#FFBF4E', '#FFE256'], ['#FF4F49', '#DD1113']
    ]
    colorArr = props.chartData.colorArr.map(r=>{
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: r[0]
            },
            {
                offset: 1,
                color: r[1]
            }
        ])
    })
    let option = {
        tooltip: {
            formatter:"{b0}: {c0}",
            borderWidth: 0,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            textStyle: {
                color: "#000"
            }
        },
        series: [
            {
                emphasis: {
                    scale: true,
                    scaleSize: 10,
                },
                name: 'Access From11',
                type: 'pie',
                radius: ['45%', '65%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                color: colorArr,
                data: props.chartData.seriesData
            }
        ]
    };
    option && myChart.setOption(option);
}
</script>
<style scoped lang="less">
.charts_box{
    width: 100%;
    height: 100%;
    position: relative;
    .charts_content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        color: #fff;
        text-align: center;
        .num_box{
            font-weight: 900;
            font-family: Arial,serif;
            text-align: justify;
            font-style: normal;
            font-size: 16px;
            .num{
                font-size: 28px;
            }
        }
    }
    .bottom_box{
        position: absolute;
        bottom: 5px;
        left: 0;
        color: #ffff;
        text-align: center;
        width: 100%;
        font-size: 14px;
    }
}
.charts-pie{
    width: 100%;
    height: 100%;
}
</style>
